import {ConfigKey} from "../../../script/constant/ConfigConstant";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {ColorStr, CombinationUIInfo, CombitionRet} from "../../../script/type/Type";
import {Util} from "../../../script/utils/Util";
import {UIConfigKey} from "../../../script/constant/UIConfig";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, View} from "../../../script/frame/apiModel/gui/React";
import CombinationInfoPage from "./CombinationInfoPage";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {Logger} from "../../../script/frame/apiModel/config/Logger";
import {CombinationBarInterface} from "../../interface/GuiInterface";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";

interface IProp {
    getCombinationInfoFun: (player: PlayerModel) => CombinationUIInfo;
}
interface IState {
    combinationInfo: CombinationUIInfo;

    x: number,
    y: number,
    combinationId: string,
    ret: CombitionRet,
    disable: boolean,
    infoVisible: boolean,
}

export default class CombinationBar extends CombinationBarInterface<IProp, IState> {

    constructor(props: IProp & IProps) {
        super(props);

        this.state = {
            combinationInfo: {
                combinationIds: {},
                ids: {}
            },
            visible: true,
            x: 0,
            y: 0,
            combinationId: '',
            ret: null,
            disable: false,
            infoVisible: false,
        }
    }


    render = () => {
        const ySpace = 0.00830;

        const itemSize = { h: 0.04980, w: 0.05000 };
        const maxCombinationNum = Configer.getConfig(ConfigKey.maxCombinationNum) as number;

        const maxCombinationMemberNum = Configer.getConfig(ConfigKey.maxCombinationMemberNum);

        const backSize = { h: 0 , w: itemSize.w };
        const backPos = { x: 0.00375, y: 0.14110 }

        const combinationIds = this.state.combinationInfo && this.state.combinationInfo.combinationIds;

        const keys = Object.keys(combinationIds);
        const combinations: { id: string, ret: CombitionRet }[] = [];
        for (let i = 0; i < maxCombinationNum; i ++) {
            const key = keys[i];
            const tempCombination = combinationIds[key];
            if (tempCombination) {
                combinations.push({ id: key, ret: tempCombination });
            } else {
                combinations.push({ id: null, ret: null })
            }
        }

        // Logger.toastError(JSON.stringify(combinations))

        const memberSize = { h: 0.03320, w: 0.02500 };
        const nameFontSize = 0.015;
        const nameSize = { h: nameFontSize, w: itemSize.w };

        backSize.h = (memberSize.h + ySpace) * keys.length;

        return <View   key={GuiKeys.combinationBarCon} style={{ left: backPos.x, top: backPos.y, width: memberSize.w * 2, height: backSize.h, paddingT: 0.00166 }}>
            {
                combinations.map(
                    (combination, combinationIndex) => {
                        const id = combination.id;
                        const combinationData = DataRouter.getCombinationDataByCombinationId(id);
                        let hidden = false;
                        if (combinationData) {
                        } else {
                            hidden = true;
                        }
                        const ret = combination.ret;

                        const materialIds = combinationData?.material_id;
                        const materialIdArr = CodeUtil.getArrBySplit(materialIds);

                        const iconPath = combinationData?.iconPath;
                        const resourceData = DataRouter.getResourceDataByResourceId(iconPath);
                        const backgroundImage = resourceData?.src;

                        let successNum = 0;
                        let currentNum = 0;

                        if (ret) {
                            successNum = ret.successNum;
                            currentNum = ret.currentNum;
                        }

                        const nums = combinationData?.material_num;
                        const numArr = CodeUtil.getArrBySplit(nums);
                        let bNull = true;
                        for (let i = numArr.length - 1; i >= 0; i--) {
                            const num = DataRouterUtil.getNumByArr(numArr, i);
                            if (num <= successNum && bNull) {
                                bNull = false;
                                numArr[i] = CodeUtil.getColorStr(ColorStr.white, numArr[i])
                            } else {
                                numArr[i] = CodeUtil.getColorStr(ColorStr.gray, numArr[i])
                            }
                        }
                        let numStr = numArr.join('/');

                        let text = '';

                        const name = combinationData?.name;
                        if (name) {
                            text = text + name;
                        }

                        const combinationDisable = (ret?.successNum === 0);
                        if (combinationDisable) {
                            text = CodeUtil.getColorStr(ColorStr.gray, text);
                        }

                        const materialIdEles: string[] = [];

                        for (let i = 0; i < maxCombinationMemberNum; i ++) {
                            const memberId = materialIdArr[i];
                            if (memberId) {
                                materialIdEles.push(memberId)
                            } else {
                                materialIdEles.push('')
                            }
                        }

                        return <View    key={`${GuiKeys.combinationBarItem}|${combinationIndex}`} style={{ hidden, width: memberSize.w * 2 + 0.00625, height: memberSize.h, marginB: ySpace }}>
                            <View   key={`${GuiKeys.combinationBarItemMember}|${combinationIndex}`} onMouseEnter={(event) => { this.showInfoPage(event.x + backSize.w, event.y, id, ret, combinationDisable) }} onMouseLeave={() => { this.closeInfoPage() }} style={{ backgroundImage: backgroundImage, width: memberSize.w, height: memberSize.h }}>
                                <View    key={`${GuiKeys.combinationBarCurrentNum}|${combinationIndex}`} style={{ float: true, fontSize: nameFontSize, width: nameFontSize, height: nameFontSize, marginT: 0.02490, marginL: 0.02500 }}>{currentNum}</View>
                            </View>
                            <View   key={`${GuiKeys.combinationBarTextCon}|${combinationIndex}`} style={{ width: memberSize.w, height: memberSize.h, marginL: 0.00625 }}>
                                <View    key={`${GuiKeys.combinationBarName}|${combinationIndex}`} style={{ marginL: 0.00375, fontSize: nameFontSize, width: nameSize.w, height: nameSize.h }}>{text}</View>
                                <View    key={`${GuiKeys.combinationBarItemMembers}|${combinationIndex}`} style={{ marginL: 0.00375, fontSize: nameFontSize, width: nameSize.w, height: nameSize.h }}>{numStr}</View>
                            </View>
                            {/*<View    key={`${GuiKeys.combinationBarItemModel}|${combinationIndex}`}  style={{ float: true, width: memberSize.w * 2, height: memberSize.h }}></View>*/}
                        </View>
                    }
                )
            }
            <CombinationInfoPage key={GuiKeys.combinationBarInfoCon} hidden={!this.state.infoVisible} combinationId={this.state.combinationId} x={this.state.x} y={this.state.y} disable={this.state.disable} unitIds={this.state.combinationInfo.ids} ret={this.state.ret}></CombinationInfoPage>
        </View>
    }
    reflushCombinationInfo = () => {
        const combinationInfo = this.props.getCombinationInfoFun(PlayerFactory.getInstance().getLocalPlayer());
        this.setState({
            ... this.state,
            combinationInfo
        })
    }
    showInfoPage = (x: number, y: number, combinationId: string, ret: CombitionRet, disable: boolean) => {
        if (ret) {
            this.setState({
                ...this.state,
                infoVisible: true,
                combinationId,
                ret,
                x,
                y,
                disable,
            })
        }
    }
    closeInfoPage = () => {
        this.setState({
            ...this.state,
            infoVisible: false,
        })
    }
}